 window.onload = function() {
     var list = document.getElementById('list');
     var prev = document.getElementById('prev');
     var next = document.getElementById('next');
     var center = document.getElementById('center_pic');
     var button = document.getElementById('buttons').getElementsByTagName('span');
     var isLogon = document.getElementById('isLogin').value;
     var timer;
     var index = 1;

     function animate(offset) {
         var newLeft = parseInt(list.style.left) + offset;
         list.style.left = newLeft + 'px';
         if (newLeft < -4750) {
             list.style.left = -950 + 'px';
         }
         if (newLeft > -950) {
             list.style.left = -4750 + 'px';
         }
     }

     function play() {
         timer = setInterval(function() {
             next.onclick();
         }, 4000)
     }

     function stop() {
         clearInterval(timer);
     }

     function button_show() {
         for (var i = 0; i < button.length; i++) {
             if (button[i].className == 'on') {
                 button[i].className = '';
             }
         }
         button[index - 1].className = 'on';
     }

     prev.onclick = function() {
         index -= 1;
         if (index < 1) {
             index = 5;
         }
         button_show();
         animate(950);
     }
     next.onclick = function() {
         index += 1;
         if (index > 5) {
             index = 1;
         }
         button_show();
         animate(-950);
     }

     play();
     center.onmouseover = stop;
     center.onmouseout = play;

     if (isLogon == 'login') {
         login();
     } else if (isLogon == 'unlogin') {
         unlogin();
     }


 }